import 'package:flutter/material.dart';
import 'package:flutter_demo/views/login_two/style/theme.dart' as theme;
import 'package:groovin_material_icons/groovin_material_icons.dart';

/// 登录页
class SignInWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SignInState();
  }
}

class _SignInState extends State<SignInWidget> {
  FocusNode _emailFocusNode = FocusNode();
  FocusNode _passwordFocusNode = FocusNode();
  FocusScopeNode focusScopeNode = FocusScopeNode();

  GlobalKey<FormState> _signInFormKey = GlobalKey();
  bool isShowPassword = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 12),
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Column(
            children: <Widget>[
              _buildSignInContainer(),
              _buildForgotText(),
              _buildOrLine(),
              _buildOtherPlatformLoginButon(),
            ],
          ),
          //定位布局
          Positioned(
            child: _buildLoginButton(),
            top: 140,
          ),
        ],
      ),
    );
  }

  Widget _buildSignInContainer() {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(8)),
        color: Colors.white,
      ),
      width: 300,
      height: 160,
      child: Form(
        //form可以对包裹的输入框进行一系列操作，如输入内容校验，输入框重置和内容的保存
        key: _signInFormKey,
        child: Column(
          children: <Widget>[
            _buildEmailTextFormField(),
            Container(
              width: 250,
              height: 1,
              color: Colors.grey[400],
            ),
            _buildPasswordTextFormField(),
            SizedBox(height: 10),
          ],
        ),
      ),
    );
  }

  ///创建 邮箱输入框
  Widget _buildEmailTextFormField() {
    return Expanded(
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 25, vertical: 16),
        child: TextFormField(
          focusNode: _emailFocusNode,
          onEditingComplete: () {
            if (focusScopeNode == null) {
              focusScopeNode = FocusScope.of(context);
            }
            focusScopeNode.requestFocus(_passwordFocusNode);
          },
          decoration: InputDecoration(
            icon: Icon(
              Icons.email,
              color: Colors.black,
            ),
            hintText: "Email Address",
            border: InputBorder.none,
          ),
          style: TextStyle(fontSize: 16, color: Colors.black),
          validator: (value) {
            if (value == null || value.isEmpty) {
              return "Email can not be empty";
            }
          },
          onSaved: (value) {},
        ),
      ),
    );
  }

  ///创建 密码输入框
  Widget _buildPasswordTextFormField() {
    return Expanded(
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 25, vertical: 16),
        child: TextFormField(
          focusNode: _passwordFocusNode,
          decoration: InputDecoration(
              icon: Icon(
                Icons.lock,
                color: Colors.black,
              ),
              hintText: "Password",
              border: InputBorder.none,

              suffixIcon: IconButton(
                icon: Icon(
                  Icons.remove_red_eye,
                  color: Colors.black,
                ),
                onPressed: () =>
                    setState(() => isShowPassword = !isShowPassword),
              )),
          obscureText: !isShowPassword,
          onSaved: (value) {},
          validator: (value) {
            if (value == null || value.isEmpty || value.length < 6) {
              return "Password'length must longer than 6!";
            }
          },
        ),
      ),
    );
  }

  ///创建 "Forgot Password"
  Widget _buildForgotText() {
    return Padding(
      padding: EdgeInsets.only(top: 50),
      child: Text(
        "Forgot Password?",
        style: TextStyle(
          fontSize: 16,
          color: Colors.white,
          decoration: TextDecoration.underline,
        ),
      ),
    );
  }

  ///创建 or这一行
  Widget _buildOrLine() {
    return Padding(
      padding: EdgeInsets.only(top: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: 1,
            width: 100,
            decoration: BoxDecoration(
                gradient:
                    LinearGradient(colors: [Colors.white10, Colors.white])),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 15),
            child: Text(
              "Or",
              style: TextStyle(
                fontSize: 16,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            height: 1,
            width: 100,
            decoration: BoxDecoration(
                gradient:
                    LinearGradient(colors: [Colors.white, Colors.white10])),
          ),
        ],
      ),
    );
  }

  ///创建 其他平台登录按钮
  Widget _buildOtherPlatformLoginButon() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white,
          ),
          child: IconButton(
              icon: Icon(
                GroovinMaterialIcons.google,
                color: Color(0xff0084ff),
              ),
              onPressed: () {}),
        ),
        SizedBox(width: 40),
        Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white,
          ),
          child: IconButton(
              icon: Icon(
                GroovinMaterialIcons.facebook,
                color: Color(0xff0084ff),
              ),
              onPressed: () {}),
        ),
      ],
    );
  }

  ///创建 登录按钮
  Widget _buildLoginButton() {
    return FlatButton(
      onPressed: () {
        if (_signInFormKey.currentState.validate()) {
          Scaffold.of(context).showSnackBar(SnackBar(content: Text("执行登录操作")));
          //保存数据
          _signInFormKey.currentState.save();
        }
      },
      padding: EdgeInsets.symmetric(horizontal: 40, vertical: 12),
      child: Text(
        "LOGIN",
        style: TextStyle(fontSize: 20, color: Colors.white),
      ),
      color: theme.Theme.gradientStart,
      highlightColor: theme.Theme.gradientEnd,
    );
  }
}
